<template>
  <div :class="webLiu ? '' : 'login-wrap'">
    <div class="ms-login" v-if="!webLiu">
      <div class="ms-title">
        <img src="../../assets/img/DL_logo.png" alt="" />
        <p> 大指姆</p>
      </div>
      <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
        <el-form-item prop="userName">
          <el-input v-model="param.userName" placeholder="账号" class="ms-input">
            <img slot="prepend" src="../../assets/img/DL_zhanghao.png" alt="">
          </el-input>
        </el-form-item> <el-form-item prop="password">
          <el-input type="password" placeholder="密码" v-model="param.password" @keyup.enter.native="submitForm()" class="ms-input">
            <img slot="prepend" src="../../assets/img/DL_mima.png" alt="">
          </el-input>
        </el-form-item>
        <p class="ms-tips">
          <el-button type="text" @click="wangBtnClick">忘记密码</el-button>
        </p>
        <div class="login-btn">
          <el-button class="Important-color" v-if="!loginLoad" type="primary" @click="submitForm()">登 录</el-button>
          <el-button class="Important-color" v-if="loginLoad" :loading="loginLoad" type="primary">登录中...</el-button>
        </div>
      </el-form>
    </div>
    <div v-if="webLiu">
      请在电脑浏览器中打开。。。
    </div>
    <!-- 获取验证码 -->
    <el-dialog title="获取验证码" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
      <el-row :gutter="10">
        <el-col :span='17'>
          <el-input v-model="keyWord" placeholder="请输入手机验证码" style="width:100%;"></el-input>
        </el-col>
        <el-col :span='5'>
          <el-button v-if="flgBtn" type="primary" @click="verificationBtn">获取验证码</el-button>
          <el-button v-else>已发送（{{ numtime }}）</el-button>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="getData">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 忘记密码弹出框 -->
    <el-dialog title="忘记密码" :visible.sync="editVisibleWang" width="30%" :close-on-click-modal="false">
      <el-row style="margin-bottom:10px;">
        <el-col>
          <el-input v-model="WangTel" placeholder="请输入用户绑定手机号" style="width:100%;"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-bottom:10px;">
        <el-col :span='17'>
          <el-input v-model="WangkeyWord" placeholder="请输入手机验证码" style="width:100%;"></el-input>
        </el-col>
        <el-col :span='5'>
          <el-button v-if="wangFlgBtn" type="primary" @click="wangYZClick">获取验证码</el-button>
          <el-button v-else>已发送（{{ numtime }}）</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-input show-password v-model="Wangpass" placeholder="请输入新密码" style="width:100%;"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisibleWang = false">取 消</el-button>
        <el-button type="primary" @click="wangSub" :loading="editVisibleWangLoad">确 定</el-button>
      </span>
    </el-dialog>
    <el-link :underline="false" class="beian" href="https://beian.miit.gov.cn/" target="_black">备案号：冀ICP备2021021897号-1</el-link>
  </div>
</template>

<script>
import Storage from '../../utils/localStorage';
import { logoAjax, getRouth, shishishi, verificationCode, wangGetCode, wangBtnSub } from '../../api/index';

export default {
  data: function() {
    return {
      webLiu: false,

      editVisible: false,
      editVisibleWang: false,
      editVisibleWangLoad: false,
      wangFlgBtn: true,
      wangTime: '',
      keyWord: '',
      WangTel: '',
      WangkeyWord: '',
      Wangpass: '',
      numtime: 60,
      flgBtn: true,
      timeSet: '',

      loginLoad: false,

      param: {
        userName: '',
        password: '',
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^.{2,15}$/.test(value) == false) {
                callback(new Error('请输入正确的用户名'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (/^.{6,20}$/.test(value) == false) {
                callback(new Error('请输入正确的密码'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
      },
    };
  },
  created() {
    Storage.removeItem("username");
    Storage.removeItem("token");
    Storage.removeItem("ddwuserData");

    this.is_weixn();
  },
  methods: {
    //判断浏览器
    is_weixn() {
      let ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.webLiu = true;
      } else {
        this.webLiu = false;
      }
    },
    getData() {
      this.loginLoad = true;
      this.numtime = 60;
      this.flgBtn = true;
      this.editVisible = false;
      clearInterval(this.timeSet);
      this.param.code = this.keyWord;
      logoAjax(this.param).then((res) => {
        if (res.code === 0) {
          this.$message.success('登录成功');
          // sessionStorage.setItem("validTimeStorge",res.user.validTime)
          Storage.setItem({
            name: "username",
            value: this.param.userName
          })
          Storage.setItem({
            name: "token",
            value: res.token
          })
          Storage.setItem({
            name: "ddwuserData",
            value: JSON.stringify(res.user)
          })
          if (Storage.getItem("token")) {
            getRouth().then((res) => {
              debugger
              if (res.code === 0) {
              debugger
                if (res.menus.length > 0) {
                  let arr = [];
                  res.menus.forEach((item, i) => {
                    if (item.childMenus.length > 0) {
                      arr.push(item);
                    }
                  })
                  console.log('arr[0].childMenus[0].url',arr[0].childMenus[0].url);
                  
                  this.$router.push('/' + arr[0].childMenus[0].url);
                } else {
                  this.$router.push('/404');
                }
              }
            });
          }
        } else {
          this.loginLoad = false;
          this.$message.error(res.msg);
        }
      });
    },
    //获取验证码
    verificationBtn() {
      this.flgBtn = false;
      clearInterval(this.timeSet);
      this.timeSet = setInterval(() => {
        this.numtime--;
        if (this.numtime == 0) {
          this.numtime = 60;
          clearInterval(this.timeSet);
          this.flgBtn = true;
        }
      }, 1000)
      verificationCode({ userName: this.param.userName }).then((res) => {
        if (res.code === 0) {
          this.$message.success("发送成功");
        } else {
          this.$message(res.msg);
        }
      });
    },
    //提交
    submitForm() {
      this.$refs.login.validate(valid => {
        if (valid) {
          this.editVisible = true;
        } else {
          // this.$message.error('请输入账号和密码');
          return false;
        }
      });
    },
    //忘记密码
    wangBtnClick() {
      this.editVisibleWang = true;
      this.wangFlgBtn = true;
      this.numtime = 60;
      clearInterval(this.wangTime);
    },
    //忘记密码获取验证码
    wangYZClick() {
      if (this.WangTel) {
        this.wangFlgBtn = false;
        clearInterval(this.wangTime);
        this.wangTime = setInterval(() => {
          this.numtime--;
          if (this.numtime == 0) {
            this.numtime = 60;
            clearInterval(this.wangTime);
            this.wangFlgBtn = true;
          }
        }, 1000)
        wangGetCode({ phone: this.WangTel }).then((res) => {
          if (res.code === 0) {
            this.$message.success("发送成功");
          } else {
            this.$message(res.msg);
          }
        });
      } else {
        this.$message('请输入手机号码');
      }
    },
    //提交新密码
    wangSub() {
      if (this.WangTel) {
        if (this.WangkeyWord) {
          if (this.Wangpass) {
            this.editVisibleWangLoad = true;
            wangBtnSub({ phone: this.WangTel, code: this.WangkeyWord, pwd: this.Wangpass }).then((res) => {
              this.editVisibleWangLoad = false;
              this.editVisibleWang = false;
              if (res.code === 0) {
                this.$message.success("修改成功");
              } else {
                this.$message(res.msg);
              }
            });
          } else {
            this.$message('请输入新密码');
          }
        } else {
          this.$message('请输入验证码');
        }
      } else {
        this.$message('请输入手机号码');
      }
    },
    shishi() {
      shishishi().then((res) => {
        const link = document.createElement('a');
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        link.download = '客户信息';
        link.style.display = 'none';
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        this.$message.success('导出成功');
      });
    }
  },
};
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets//img//sthlogin-bg.png);
    background-size: 100%;
}

.ms-title {
    width: 100%;
    line-height: 25px;
    text-align: center;
    font-size: 20px;
    color: #333;
}

.ms-title img {
    width: 100px;
    height: 100px;
    padding: 100px 0 10px;
}

.ms-title p {
    font-size: 20px;
    color: #e95412;
    font-weight: bold;
}

.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../../assets/img/DL_yuan.png);
    background-size: 100% 100%;
}

.ms-content {
    padding: 30px 30px;
    width: 320px;
    margin: 0 auto;
}

.ms-input {
    box-shadow: 0 0 10px #ccc;
    border-radius: 8px;
    overflow: hidden;
}
.Important-color {
    background: #e95412 !important;
    border-color: #e95412 !important;
}
.Important-color >>> span {
    font-weight: bold;
    font-size: 14px;
}
.el-button--primary {
    background: #e95412 !important;
    border-color: #e95412 !important;
}
.el-button--default:hover {
    border-color: #e95412 !important;
    color: #e95412 !important;
    background: #fff;
}
.ms-input >>> .el-input__inner,
.ms-input >>> .el-input-group__prepend {
    border: none !important;
    background: #fff;
}

.ms-input >>> .el-input__inner {
    padding: 20px 0;
}

.ms-input >>> .el-input-group__prepend img {
    width: 15px;
}

.ms-tips {
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.login-btn {
    text-align: center;
    margin-top: 35px;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 14px;
}

.login-btn button {
    width: 50%;
    height: 36px;
    margin-bottom: 10px;
    font-size: 14px;
}

.login-tips {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.beian {
    position: fixed;
    bottom: 2%;
    width: 100%;
    color: #fff;
}

.beian:hover {
    color: #fff;
}
</style>
